﻿@page "/"

<h3>为你推荐</h3>
@* <button class="btn btn-primary" @onclick="GetRecommendedBooks">Test Get Books</button> *@


@if (recommendedBooks == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @for(int i=0;i<recommendedBooks.Count;i++)
            {
                var book = recommendedBooks[i];
                <tr>
                    <td>@(i+1)</td>
                    <td>@book.info.name</td>
                    <td>@book.info.author</td>
                    <td>@book.info.publisher</td>
                    <td>
                        <button @onclick="() => OnClickBookItem(book.id)">查看</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}


<div class="bottom-center">
    <button class="center-button" @onclick="UploadBook">pload Book</button>
   @*  <button class="center-button" @onclick="TestUploadBook">Test Upload Book</button> *@
</div>

<style>
    /* 样式表中定义容器和按钮的样式 */
    .container {
        height: 100vh; /* 使容器铺满整个视口高度 */
    }

    .bottom-center {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-button {
        width: 100%;
        height: 100%;
    }
</style>